import React, { FC,useState,ChangeEvent } from 'react'
import useGetComponentInfo from '../../../hooks/useGetComponentinfo.ts'
import styles from './Layers.module.scss'
import classNames from 'classnames'
import { message,Input,Button,Space } from 'antd'
import { useDispatch } from 'react-redux'
import { 
    changeSelectedId,
    changeComponentTitle,
    toggleComponentLocked,
    changeComponentHidden,
    moveComponent
} from '../../../store/componentsReducer/index.ts'
import { EyeInvisibleOutlined,LockOutlined } from '@ant-design/icons'
// import SortableContainer from '../../../components/DragSortable/SortableContainer.tsx';
// import SortableItem from '../../../components/DragSortable/SortableItem.tsx';


const Layers: FC = () => {
    const { componentList, selectedId } = useGetComponentInfo()
    const dispatch = useDispatch()
    const [changingTitleId,setChangingTitleId] = useState('')

    // 点击选中组件
    function handleTitleClick(fe_id: string) {
        const curComp = componentList.find(c => c.fe_id === fe_id)
        console.log('curComp',curComp?.isHidden);
        
        if (curComp && curComp.isHidden) {
            message.info('不能选中隐藏的组件')
            return
        }
        if (fe_id !== selectedId) {
            console.log('未被选中');
            // 点击第一下 当前组件未被选中，执行选中
            dispatch(changeSelectedId(fe_id))
            setChangingTitleId('')
            return
        }

        // 点击修改标题--连续点击两下
        console.log('点击了');
        setChangingTitleId(fe_id)
    }

    // 修改标题
    const changeTitle = (event: ChangeEvent<HTMLInputElement>)=>{
        const newTitle = event.target.value.trim()
        if(!newTitle) return
        if(!selectedId) return

        dispatch(changeComponentTitle({fe_id:selectedId,title:newTitle}))

    }
    // 切换隐藏和显示
    const changeHidden = (fe_id:string, isHidden: boolean)=>{
        dispatch(changeComponentHidden({fe_id,isHidden}))
    }

    // 切换 锁定/解锁
    const changeLocked = (fe_id:string)=>{
        dispatch(toggleComponentLocked({fe_id}))
    }

    // SortableContainer 需要每个Item 都有id
    return <div>
        {componentList.map(c => {
            const { fe_id, title, isHidden, isLocked } = c

            // 拼接 title className
            const titleDefaultClassName = styles.title
            const selectedClassName = styles.selected
            const titleClassName = classNames({
                [titleDefaultClassName]: true,
                [selectedClassName]: fe_id === selectedId
            })
            return (
                
                <div key={fe_id} className={styles.wrapper}>
                    <div className={titleClassName} onClick={()=>handleTitleClick(fe_id)}>
                            {fe_id === changingTitleId && 
                            <Input  
                                value={title} 
                                onChange={changeTitle}
                                onBlur={()=>setChangingTitleId('')} 
                                onPressEnter={()=> setChangingTitleId('')} />}
                            {fe_id !== changingTitleId && title }
                        </div>
                        <div className={styles.handler}>
                            <Space>
                                <Button 
                                    size="small"
                                    shape="circle"
                                    className={!isHidden ? styles.btn : ''} 
                                    icon={<EyeInvisibleOutlined />} 
                                    type={isHidden ? 'primary' : 'text'}
                                    onClick={()=>changeHidden(fe_id,!isHidden)}
                                    />
                                <Button 
                                    size="small"
                                    shape="circle"
                                    className={!isHidden ? styles.btn : ''} 
                                    icon={<LockOutlined />} 
                                    onClick={()=>changeLocked(fe_id)}
                                    type={isLocked ? 'primary' : 'text'} />
                            </Space>
                        </div>
                </div>
            )
        })}
    </div>
}

export default Layers